
import tpl from './index.html'

export default {
    template: tpl,
    propTypes: {
        // 1、常用
        // 组件唯一默认对外双向绑定的数据
        value: {
            type: 'string',
            value: ''
        },
        // 组件包裹层自定义行内样式
        style: {
            type: 'string',
            value: ''
        },
        // 2、更多
        // 滚动阈值
        threshold: {
            type: 'numeric',
            value: 500
        },
        xxxxx: {
            type: function (value, props){
                return true;
            },
            value: false
        }
    },
    data: function(){
        return {
            name: "组件名称",
            // 状态
            states: {
                isShow: false
            },
            opts: {
                
            },
            other: {

            }
        }
    },
    methods: {
        handle: function(){
            var self = this;
            var winSt = window.pageYOffset || window.scrollY;
            var threshold = self.get('threshold');
            if(winSt < threshold){
                self.set('states.isShow', false);
            }else {
                self.set('states.isShow', true);
            }
        },
        gotop: function(){
            $("html, body").animate({
                scrollTop: 0
            }, 200)
        }
    },
    filters: {
        
    },
    // 数据监听
    watchers: {
        "value": {
            watcher: function(newValue){
                var self = this;
                
            },
            sync: true
        }
    },
    afterMount: function(){
        var self = this;
        Yox.dom.on(window, 'scroll', function(){
            self.handle()
        })
        Yox.dom.on(window, 'resize', function(){
            self.handle()
        })
    },
    beforeDestroy: function(){
        Yox.dom.off(window, 'scroll', function(){
            self.handle()
        })
        Yox.dom.off(window, 'resize', function(){
            self.handle()
        })
    }
};